<template>
  <div id="Seckill">
    <div class="title">
      <div class="left">
        <span>限时秒杀</span>
        <span>12点场</span>
        <span>倒计时</span>
      </div>
      <div class="right">
        <a href="#">
          更多秒杀
          <span class="fa fa-chevron-circle-right"></span>
        </a>
      </div>
    </div>
    <div class="list">
      <ul class="commodity">
        <li v-for="(item, index) in list" :key="index">
          <ul>
            <a href="#">
              <li><img :src="item.img" alt=""></li>
              <li>￥{{item.discount}}</li>
              <li>￥{{item.price}}</li>
            </a>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Seckill',
  data () {
    return {
      time: 20,
      list: [
        { img: 'https://s2.ax1x.com/2019/09/17/n4GnX9.jpg', discount: 49, price: 150 },
        { img: 'https://s2.ax1x.com/2019/09/17/n4GEfU.jpg', discount: 19, price: 69 },
        { img: 'https://s2.ax1x.com/2019/09/17/n4GAYT.jpg', discount: 1399, price: 2899 },
        { img: 'https://s2.ax1x.com/2019/09/17/n4GPwq.jpg', discount: 1599, price: 3888 },
        { img: 'https://s2.ax1x.com/2019/09/17/n4BpCR.jpg', discount: 15, price: 88 },
        { img: 'https://s2.ax1x.com/2019/09/17/n4BCgx.jpg', discount: 399, price: 888 },
        { img: 'https://s2.ax1x.com/2019/09/17/n4BkDO.jpg', discount: 9.9, price: 38 },
        { img: 'https://s2.ax1x.com/2019/09/17/n4BlKf.jpg', discount: 3599, price: 5888 }

      ]
    }
  },
  mounted () {
    this.timedwon()
  },
  methods: {
    timedwon () {
      let newtiem = new Date()
      console.log(this.time - newtiem)
    }
  }
}
</script>

<style scoped>
#Seckill {
  font-size: 28px; /*px*/
  width: 95%;
  margin: 0 2.5%;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
#Seckill .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
#Seckill .title .left span {
  margin: 0 0 0 10px;
}
#Seckill .title .left span:nth-child(1) {
  font-size: 40px; /*px*/
  font-family: "楷体";
  font-weight: 900;
  margin: 0 0 0 20px;
}
#Seckill .title .left span:nth-child(2) {
  font-weight: 600;
}
#Seckill .title .right a {
  color: rgba(255, 0, 0, 1);
  margin: 0 20px 0 0;
}
#Seckill .list .commodity {
  display: flex;
  overflow-x: auto;
  text-align: center;
  padding: 0 0 20px 0;
}
#Seckill .list .commodity > li ul {
  width: 150px;
  margin: 0 0 0 20px;
}
#Seckill .list .commodity li ul li:nth-child(1) img {
  width: 100%;
}
#Seckill .list .commodity li ul li:nth-child(2) {
  color: rgba(255, 0, 0, 1);
  font-size: 32px; /*px*/
  font-weight: 900;
}
#Seckill .list .commodity li ul li:nth-child(3) {
  color: rgba(200, 200, 200, 1);
  font-size: 28px; /*px*/
  text-decoration: line-through;
}
</style>
